<template>
    <div class="scroll_box" :style="{ '--i': item, '--delay': delay }" @animationend="isShow = false">
        <div class="list_box" :class="{ animate: isShow }">
            <div>0</div>
            <div v-for="num in 9">{{ num }}</div>
            <div>0</div>
        </div>
    </div>
</template>
  
<script>
export default {
    name: "ScrollList",
    props: {
        item: {
            type: Number,
            default: 0
        },
        delay: {
            type: Number,
            default: 1
        },
    },
    data() {
        return {
            timer: null,
            isShow: true
        };
    },
    watch: {
        item(newVal, oldVal) {
            console.log(newVal);
            this.isShow = true;
        }
    },
    mounted() { },
    beforeDestroy() { }
};
</script>
  
<style scoped lang="scss">
.scroll_box {
    width: 70px;
    height: 90px;
    font-size: 50px;
    overflow: hidden;
    line-height: 90px;
    text-align: center;
}

.list_box {
    color: #fff;
    transform: translateY(calc(var(--i) * -9.05%));
}

.animate {
    animation: move 0.3s linear infinite,
    bounce-into 0.8s calc(var(--delay) * 1s) forwards;
}


@keyframes move {
    from {
        transform: translateY(-90%);
        filter: url(#blur);
    }

    to {
        transform: translateY(1%);
        filter: url(#blur);
    }
}

@keyframes bounce-into {
    from {
        transform: translateY(calc(var(--i) * -9.05% - 7%));
        filter: none;
    }

    25% {
        transform: translateY(calc(var(--i) * -9.05% + 3%));
    }

    50% {
        transform: translateY(calc(var(--i) * -9.05% - 1%));
    }

    70% {
        transform: translateY(calc(var(--i) * -9.05% + 0.6%));
    }

    85% {
        transform: translateY(calc(var(--i) * -9.05% - 0.3%));
    }

    to {
        transform: translateY(calc(var(--i) * -9.05%));
    }
}
</style>